<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例详情</title>
		<link rel="stylesheet" href="iconfont/iconfont.css">
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/header.css" />
		<link rel="stylesheet" type="text/css" href="css/footer.css" />
		<link rel="stylesheet" type="text/css" href="css/examdetails.css" />
	</head>
	<body>
		<header>
			<div class="top">
				<div class="top_con">
					<img src="img/logo.png" />
					<ul class="top_r">
						<li class="icon_first">
							<span class="iconfont icon-dianhua"></span>
							<i>0503-60652189</i>
						</li>
						<li>
							<span class="iconfont icon-qq"></span>
						</li>
						<li>
							<span class="iconfont icon-wb"></span>
						</li>
						<li>
							<span class="iconfont icon-weixin"></span>
						</li>
						<li>
							<span class="iconfont icon-youxiang"></span>
						</li>
					</ul>
					<ul class="top_c">
						<li><a href="index.html">网站首页</a></li>
						<li><a href="#">传悦资源</a></li>
						<li style="background-color: #dd4012;color: #ffffff;"><a href="exam.html">传悦案例</a></li>
						<li><a href="#">传悦服务</a></li>
						<li><a href="solu.html">解决方案</a></li>
						<li><a href="#">需求提交</a></li>
					</ul>
				</div>
			</div>
		</header>
		<div class="details">
			<h2 id="title"></h2>
			<p id="title_first"></p>
			<img src="" id="detailimg">
			
			<div class="intro">
				
			</div>
			<span></span>
			<div class="det_bottom">
				<p id="prev">上一个：<b>开门红计划表</b></p>
				<p id="next">下一个：<b>开门红计划表</b></p>
			</div>
			
		</div>
		<footer>
			<div class="bottom">
				<div class="logo_min">
					<img src="img/logo-min.png">
				</div>
				<div class="bot_right">
					<ul class="b_r">
						<li>
							<a href="#">关于传悦</a>
						</li>
						<li>
							<a href="#">新闻动态</a>
						</li>
						<li>
							<a href="#">传悦观点</a>
						</li>
						<li>
							<a href="#">联系传悦</a>
						</li>
						<li>
							<a href="#">加入传悦</a>
						</li>
						<li>
							<a href="#">付款账户</a>
						</li>
					</ul>
					<div class="b_l">
						<span>Copyright&copy;2013</span>
						<span>创梦网络科技有限责任公司</span>
						<span>||</span>
						<span>传悦 Chnyoo.cn All Rights Reserved</span>
						<span>京ICP备12005221号</span>
					</div>
				</div>
			</div>
		</footer>
	</body>
</html>
<script src="jquery.min.js"></script>
<script>
	$(function(){
		
		let url=location.href;
		
		let result={}
		//封装一个方法，将地址栏后面的请求参数转变为对象形式
		String.prototype.parseUrl=function(){
			let index=this.indexOf("?");	//获取字符串中？的下标值，如果为-1，则说明没有请求参数，直接执行return
			if(index==-1){
				return;
			}else{
				//将字符串从？后开始截取出来，id=1&name=2
				//使用split()方法将字符串转成数组，通过分割& ["id=1", "name=2"]
				//再遍历数组，将每个请求参数通过=分割 ["id", "1"] ["name", "2"]
				this.slice(index+1).split("&").forEach(function(item){
					let arr=item.split("=");
					result[arr[0]]=arr[1];
				})
				return result;
			}		
		}
		let id=url.parseUrl().id;
		$.ajax({
			url:`http://127.0.0.1:8080/examdetails?id=${id}`,
			success:function(data){
				//此时data应该使用var,let声明的变量只能被声明一次
				var data=JSON.parse(data)[0];	
				$("#title").html(data.title);
				$("#title_first").html(data.explain);
				$("#detailimg").attr("src",data.detailsImg);
				$(".intro").html(data.content);
			}
		})
	})
</script>